Einfache Homepage mit HTML
gestalten
Wer eine Homepage ins Internet stellen will
sollte einige Grundlagen über HTML, die Aufzeichnungssprache des Internets kennen. Mit
ein paar gezielt eingesetzten HTML-Kommandos können Farben, Schriften, Bilder, Tabellen
und interessante Querverweise ins globale Netz der Netze gestellt werden. In dieser kurzen
Kompaktübersicht (die Idee dazu stammt aus einem Artikel der
Computerzeitschrift CHIP) soll das zentrale Basis-Know-how
kurz und umsetzungsorientiert dargestellt werden.
So gehts los - Einfacher Einstieg in HTML
HTML bedeutet HyperText Markup Language. Es handelt sich dabei um eine Sprache, die mit Hilfe von SGML (Standard Generalized Markup Language) definiert wird. SGML ist als ISO-Norm 8879 festgeschrieben.
HTML ist eine sogenannte Auszeichnungssprache (Markup Language). Sie hat die Aufgabe, die logischen Bestandteile eines Dokuments zu beschreiben. Als Auszeichnungssprache enthält HTML daher Befehle zum Markieren typischer Elemente eines Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen.
Das Beschreibungsschema von HTML geht von einer hierarchischen Gliederung aus. HTML beschreibt Dokumente. Dokumente haben globale Eigenschaften wie zum Beispiel einen Titel oder eine Hintergrundfarbe. Der eigentliche Inhalt besteht aus Elementen, zum Beispiel einer Überschrift 1. Ordnung. Einige dieser Elemente haben wiederum Unterelemente. So enthält ein Textabsatz zum Beispiel eine als fett markierte Textstelle, eine Aufzählungsliste besteht aus einzelnen Listenpunkten, und eine Tabelle gliedert sich in einzelne Tabellenzellen.
Die meisten dieser Elemente haben einen fest definierbaren Erstreckungsraum. So geht eine Überschrift vom ersten bis zum letzten Zeichen, eine Aufzählungsliste vom ersten bis zum letzten Listenpunkt, oder eine Tabelle von der ersten bis zur letzten Zelle. Auszeichnungen markieren Anfang und Ende von Elementen. Um etwa eine Überschrift auszuzeichnen, lautet das Schema:
| [Überschrift] Text der Überschrift [Ende Überschrift] |
Bei einem Element, das wiederum Unterelemente besitzt, etwa einer Aufzählungsliste, läßt sich das gleiche Schema anwenden:
| [Liste] [Listenpunkt] Text des Listenpunkts [Ende Listenpunkt] [Listenpunkt] Text des Listenpunkts [Ende Listenpunkt] [Ende Liste] |
WWW-Browser, die HTML-Dateien am Bildschirm anzeigen, lösen die Auszeichnungsbefehle auf und stellen die Elemente dann in optisch gut erkennbarer Form am Bildschirm dar. Dabei ist die Bildschirmdarstellung aber nicht die einzige denkbare Ausgabeform. HTML kann beispielsweise genauso gut mit Hilfe synthetisch erzeugter Stimmen auf Audio-Systemen ausgegeben werden.
Jede Auszeichnung auf der Seite nimmt man mit Hilfe von Kürzeln vor - im Zusammenhang mit HTML spricht man von "Tags". Ein Tag (auch Etikett) wird mit dem Kleiner-Zeichen (<) eingeleitet. Danach folgen das Kommando und meist noch einige Parameter. Das Ende des Tags kennzeichnet ein Größer-Zeichen (>). Ein Tag ist zum Beispiel <b>. Dieses legt fest, dass der nachfolgende Text "fett" (bold) gesetzt wird.
Die meisten Kommandos erfordern es, dass außer dem Anfang auch das Ende der jeweiligen
Formatierung gekennzeichnet wird. Am Ende einer Formatierung wiederholt sich das Kommando,
aber diesmal muss ein Schrägstrich davor stehen. Der Tag </b> bestimmt,
dass der nachfolgende Text wieder normal (nicht fett) dargestellt wird.
Das Erstellen von HTML Dikumenten erfordert lediglich einen normalen Texteditor. Zum Anzeigen benötigt man einen Browser. Damit man sofort am Bildschirm die Formatierungen der HTML-Seite kontrollieren kann, empfiehlt sich, neben dem Editor oder der Textverarbeitung den entsprechenden Browser offen zu halten. Sobald eine Änderung vorgenommen und die Datei gespeichert wurde, muß man im Browser auf Reload-Button (Aktualisierung) drücken um die aktuelle neue Form zu laden.Daraufhin werden die Änderungen sofort sichtbar.
Für Anwender, die nicht so umständlich agieren wollen, gibt es eine Reihe spezieller HTML-Editoren, aber auch diverse HTML-Filter für Textverarbeitungsprogramme am Markt. So ist es z.B. möglich, direkt ein Word Dokument, eine Powerpoint Show oder eine Excel Tabelle direkt in HTML-Version abzuspeichern, ohne sich mit HTML beschäftigen zu müssen.
Legen Sie sich eine Datei an und speichern Sie diese unter dem gewünschten Namen mit der Dateierweiterung HTML oder HTM.
Der Aufbau eines
HTML-Dokuments
Jedes HTML-Dokument beginnt prinzipiell mit dem Tag
<html> , der in die erste Zeile des Dokuments gesetzt wird, und endet mit dem Tag </html> , den Sie analog dazu in die letzte Zeile schreiben. Ebenso gibt es ein paar grundlegende Layout-Vorgaben.So unterscheidet man zwei Bereiche:
- den Kopf (Head), in dem einige grundsätzliche Definitionen stehen; dazu gehört vor allem der Text, der in der Titelzeile des Fensters dargestellt wird;
- den Textkörper (Body); er enthält weiteren Text, aber auch Grafiken, Animationen und Java-Applets.
Die Tags, um die zwei Bereiche zu definieren, lauten <head> und <body>
Eine Homepage muß also wie folgt aufgebaut sein:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Zum Definieren des Titels verwendet man den Tag <title> wie im Beispiel:
<html>
<head>
<title>Meine erste Homepage</title>
</head><body>
Willkommen auf meiner Homepage!
Ihre Straße zum Erfolg.Text...Text...Text ...
</body>
</html>
Die Seite mag in dieser Form zwar zunächst funktionieren. Doch spätestens, wenn sie mit
einem Computer betrachtet wird, der unter einem anderen Betriebssystem läuft, können
Probleme auftreten. Die Zeichentabellen der einzelnen Betriebssysteme unterscheiden sich
nämlich und nur die gewöhnlichen Buchstaben, Ziffern und Satzzeichen befinden sich an
derselben Position, d.h. sie werden gleich dargestellt. Was ist aber wenn nationale
Zeichen wie Umlaute, der Buchstabe "ß" und die Sonderzeichen im Dokument
enthalten sind. Vielfach werden diese nicht korrekt dargestellt.
Achtung bei Umlauten
und "ß" - diese muß man umschreiben
Das oben angesprochen Problem wird umgangen, indem diese "kritischen" Zeichen nicht direkt eingeben, sondern umschrieben werden. Dazu stellt HTML einige Codes bereit, die jeweils mit "&" eingeleitet und mit einem Semikolon abgeschlossen werden. Die Umschreibung für ein "ö" lautet zum Beispiel "ö". Ein Auszug einzelner Codes (weitere finden sich im Internet z.B. bei www.weblehre.de, oder bei www.selhtml.de)
| Zeichen | Kodierung im Text |
| § | § |
| © | © oder: ® |
| ® | ® oder: © |
| µ | µ |
| ¼ | ¼ |
| ½ | ½ |
| ¾ | ¾ |
| Ä | Ä oder: Ä |
| Ö | Ö oder: Ö |
| Ü | Ü oder: Ü |
| ä | ä oder: ä |
| ö | ö oder: ö |
| ß | ß oder: ß |
Die korrigierte HTML-Beispielseite sieht dann wie folgt aus:
<html>
<head>
<title>Meine erste Homepage</title>
</head><body>
Willkommen auf meiner Homepage!
Ihre Straße zum Erfolg.</body>
</html>
Die Zeichenumschreibung direkt einzugeben verlangt Konzentration. Am besten arbeiten man
mit der Suchen/Ersetzen Funktion die in jeder Textverarbeitung zu finden ist.
Sonderzeichen einfach normal schreiben, und am Schluß einfach mit der
Suchen-und-Ersetzen-Funktion austauschen.
Neben Umlauten und Sonderzeichen gibt es weitere Besonderheiten: Auch Zeilenumbruch sowie Leerzeilen werden per Tag eingegeben. Das gewohnte Betätigen der Return-Taste führt nicht zum Ziel, Returns werden ignoriert. Statt dessen werden <br> (Break; zu deutsch: Zeilenumbruch) und <p> (Paragraph; auf deutsch: Absatz) benutzt.
<br> gibt das Ende einer Zeile vor; der nachfolgende Text wird in die nächste Zeile umbrochen. Die Eingabe hallo<br> hallo setzt die "saloppe" Anrede zweizeilig. <p> setzt Text zweizeilig, erzeugt aber zusätzlich eine Leerzeile. Die Eingabe hallo<p> hallo formatiert Text auf der Homepage so:
hallo
hallo
Für größere Textabstände müssen mehrere Tags <br> verwendet werden, da mehrere <p>-Tags ignoriert werden. Zwei Leerzeilen erhält man zum beispielsweise so:
hallo<br><br><br>hallo
Da die Beispielseite aus unformatiertem Text besteht, wirkt sie noch recht trist. Sie soll jetzt durch unterschiedliche Schriftgrade und Schriftfarben optisch ansehnlicher gestaltet werden.
Textgestaltung -
"font" bringt Leben und Gestalt auf Seiten
Das Kommando für diesen Zweck lautet »font«. Es kennt eine Reihe von Parametern, welche die genaue Schriftformatierung festlegen: »size« definiert den Schriftgrad, »color« bestimmt die Farbe und »face« die Schriftart. Ein Kommando könnte zum Beispiel lauten:
<font size=5 color=red face=Arial,Helvetica>Willkommen auf meiner Homepage!</font>
In diesem Fall wird die Überschrift der Seite in einem hohen Schriftgrad, in roter Schriftfarbe und in der angegebenen Schriftart dargestellt. Zunächst zum Parameter »size«. Dieser kennt sieben Abstufungen: von 1 (sehr klein) bis 7 (sehr groß). Außerdem kann die Angabe relativ erfolgen: <font size=+2> stellt den Text zum Beispiel zwei Stufen größer dar und <font size=-1> eine Stufe kleiner.
Der Parameter »color« weist zunächst keine besonderen Schwierigkeiten auf, er erfordert lediglich ein Schlüsselwort, das die Schriftfarbe repräsentiert. Da sich über Schlüsselwörter die Farbabstufungen nur sehr grob definieren lassen, kann alternativ die gewünschte Farbe als RGB-Wert (Rot/Grün/Blau) angegeben werden.
Dies ist jedoch etwas diffizil: Die Angabe muß hexadezimal erfolgen, und es ist etwas Erfahrung hinsichtlich der additiven Farbmischung notwendig. Die Definition erfolgt in der Form »color =#rrggbb«, wobei jeweils Werte von 00 (dezimal 0) bis ff (dezimal 255) erlaubt sind. »color=#ff00ff« definiert folgende Anteile: maximaler Rotanteil, kein Grünanteil, maximaler Blauanteil. Das Ergebnis ist ein Violett. Beim Umrechnen von dezimal nach hexadezimal hilft im übrigen ein technisch-wissenschaftlicher Taschenrechner, wie er in allen Windows Versionen integriert ist.
Es mag etwas verwundern, daß im Beispiel zwei Schriftarten (Arial und Helvetica) angegeben sind. Der Grund ist, daß die einzelnen Computer häufig einen unterschiedlichen Schriftenbestand auf Lager haben. Es ist daher sinnvoll, mehrere Schriftarten zu definieren, es wird dann die Schrift verwendet, die zuerst gefunden wird. Im konkreten Beispiel kommt daher als Schriftart Arial zum Einsatz. Ist sie nicht verfügbar, wird der Text in Helvetica angezeigt.
Es sollten nur solche Schriftarten als Alternative angeben werden, die ähnlich aussehen, sonst fällt das Layout der Seite kaum einheitlich aus. Im Falle von Helvetica und Arial ist diese Voraussetzung erfüllt.
Durch die Schriftformatierungen wird das HTML-Dokument nun langsam optisch ansehnlich. Was noch sehr störend wirkt, ist der einfache Standardhintergrund. Daher sollte Farbe ins Spiel kommen. Eine gewünschte Farbe für den Hintergrund kann über den Parameter »bgcolor« (für BackGround) beim body-Tag angegeben werden.
HTML wird laufend durch das "WWW Consortium" weiterentwickelt. Es gbt die Versionen HTML 1.0, HTML 2.0, HTML 3.0 und HTML 4.0. Leider haben haben die Browser-Hersteller den HTML-Befehlssatz auch eigenmächtig erweitert. Zum Beispiel erzeugte der Befehl "marquee" nur im Microsoft Explorer anfangs eine Laufschrift, nicht im Netscape Navigator. Seit der HTML-Version 3.2 sind jedoch viele proprietäre Änderungen wieder zusammengeführt worden und somit wurde wieder Kompatibilität zwischen den Browsern hergestellt. Es gibt jedoch leider immer wieder solche Inkompatibilitäten durch proprietäre Erweiterungen.
HTML-Editoren und
Konvertierungstools
Es klingt verlockend: Inzwischen gibt es eine Vielzahl an HTML-Editoren sowie Konvertierungs-Tools für Textverarbeitungen, die es ohne HTML-Kenntnisse erlauben, Seiten für das World-Wide Web anzufertigen. Bei nicht allzu hohen Ansprüchen leisten diese Tools tatsächlich, was sie versprechen. Ist jedoch ein perfektes, komplexes Layout gefordert, stoßen die Tools schnell an ihre Grenzen.
Bestimmte Layouts lassen sich mit vielen Tool gar nicht herstellen oder erfordern nach dem Konvertieren komplexe manuelle Nachbearbeitung, wozu wiederum HTML-Kenntnisse notwendig sind. Daher empfiehlt es sich in der Praxis, die Seiten von vornherein mit Hilfe von HTML-Kommandos zu layouten, und zwar mit Hilfe eines gewöhnlichen Texteditors.
Grafiken ins HTML-Dokument
einbinden
Ein HTML-Dokument ohne Grafik wird kaum dem optisch orientierten World-Wide Web gerecht. Daher sollten Dokumente mit Grafiken anreichert werden. Das Kommando zum Einbinden von Grafiken lautet »img« (für image; zu deutsch: Bild). Verzeichnis und Dateiname werden mit Hilfe des Parameters »src« (Source, zu deutsch: Quelle) angegeben. Als Dateiformate können GIF und JPEG verwendet werden. Dazu ein Beispiel:
<img src="/images/hallo.gif">
bindet die angegebene Grafik aus dem Verzeichnis /images ein.
Die Größe der Grafik läßt sich über die Parameter »width« (Breite) und »height« (Höhe) angeben. Die Einheit bezieht sich auf Pixel. <img src="/images/hallo.gif" width=70> stellt die Grafik mit einer Breite von 70 Pixel dar.
Die Höhe ergibt sich in diesem Fall aus dem Seitenverhältnis der Grafik. Ebenso können Sie die Höhe der Grafik angeben. Dann resultiert die Breite aus dem Seitenverhältnis. Beide Parameter sollten in der Praxis nicht zusammen verwendet werden, da sonst die Grafik mit ziemlicher Sicherheit gestaucht oder gestreckt wird.
Beim Skalieren ergibt sich ein weiteres Problem: Bitmap-Grafiken lassen sich bekanntlich nur mit Qualitätsverlust vergrößern. Es ist daher in der Regel besser, die ursprüngliche Grafik mit Hilfe eines Bildbearbeitungs- oder Illustrationsprogramms auf die gewünschte Auflösung herunterzurechnen und die auf diese Art erzeugte Grafik in Originalgröße in das HTML-Dokument einzubinden. So kann auf die Parameter »width« und »height« vollständig verzichtet werden.
HTML erlaubt es, sogenannte animierte GIF-Dateien auf eine Homepage einzubinden. Ein animiertes GIF ist eine besondere GIF-Datei, in der die einzelnen Sequenzen hintereinander gespeichert sind. Öffnet man eine derartige GIF-Datei mit einem gewöhnlichen Grafikprogramm, sieht man nur die erste Sequenz, der Rest wird ignoriert.
Zur Anfertigung und Bearbeitung von animierten GIFs ist daher Spezialsoftware notwendig. Unter Windows eignet sich dafür zum Beispiel der Image Composer von Microsoft. Bilder und auch animierte Bilder können auch über das Internet heruntegeladen werden (Achtung - Urheberrechte beachten. Eine Quelle ist die URL http://www.mindwork.shop.com/alchemy/gifcon.html ).
ZU beachten ist, dass nicht alle Browser animierte GIFs darstellen können, ausgenommen davon sind jedoch die wichtigen Browser Netscape Navigator und Explorer.
Links machen die HTML-Seite komplett
Auf der Beispielseite fehlen jetzt noch die Links (Querverweise) auf Folgeseiten oder auf andere interessante Seiten im weltweiten Netz.
Ein Link wird prinzipiell mit dem Tag <a href="..."> eingeleitet und mit </a> abgeschlossen. Der Text, der sich zwischen diesen beiden Tags befindet, wird unterstrichen dargestellt und farblich abgesetzt, so daß sofort zu erkennen ist: Dieser Text kann angeklickt werden.
Hinter »a href=« schreibt man das Verzeichnis und den Namen der Datei, auf die verwiesen werden soll:
<a href="/div/index.html">Index</a>
Befindet sich das Dokument dagegen auf einem anderen Server, muss die komplette URL angegeben werden:
<a href="http://www.yyyxxx.at/adac/stau/welcome.html">aktuelle Staumeldungen</a>
In
beiden Fällen müssen je nach Computer auf die Namenskonventionen für die Verzeichnisse
(Slash "/" oder Backslash "\") geachtet werden.
Es können auch die Farben, in der Links angezeigt werden, festgelegt werden. Dazu muss ein Eintrag im body-Tag mit den Parametern »link« und »vlink« eingegeben werden. Dabei gibt »link« die Farbe der Links vor, die noch nicht angeklickt wurden, und »vlink« die Farbe der Links, die bereits angewählt wurden (»vlink« steht für »visited link«).
Eine Definition sieht beispielsweise so aus:
<body bgcolor=blue link=yellow vlink=red>
Ohne einen E-Mail-Link wäre die schönste Homepage nicht komplett; denn der Benutzer müßte die E-Mail-Adresse mühsam von der Seite abschreiben und in seinen E-Mail-Client eingeben. Ein E-Mail-Link öffnet statt dessen ein Fenster im Browser, über das man direkt eine E-Mail absenden kann. Einen E-Mail-Link definiert man wie einen gewöhnlichen Link, nur dass anstelle des Dateinamens die E-Mail-Adresse angegeben wird, wobei der Text »mailto:« vorangestellt wird.
Dazu ein Beispiel:
Schreibt mir doch einfach eine Mail. <a href="mailto:max@beispielnetz.at">Hier klicken</a>.
Diese einfache Homepage kann sich schon sehen lassen. Nur die einfache Anordnung
der Texte und Bilder im Kettenprinzip stört. Wie Elemente auf einer Seite über Tabellen
frei positionier werden, können ist Thema eines weiteren Beitrags, der als Ergebnis eines
Studentenprojektes erarbeitet wird.
Zurück zur Homepage von IT1
Zurück zur Angabe der Übung 4 - IT1